<!--电子合同-->
<template>
  <a-card
    style="height: 100%; width: 100%; display: flex; flex-direction: column"
    :bodyStyle="{ flex: 1, height: 0, padding: '24px' }"
  >
    <template #title>
      <!--      <cu-icon class="icon-primary" type="org-hetong" />-->
      充电桩收费
      <span>
        <a-tooltip>
          <template #title
            >月卡支付统计当天用户购买月卡的金额；
            在线支付统计用户当天在线支付的充电费用（例：微信支付）
            余额支付统计当天用户使用余额支付的费用。</template
          >
          <QuestionCircleOutlined />
        </a-tooltip>
      </span>
    </template>
    <template #extra>
      <a-button type="link" size="small" @click="goMore"
        >更多&nbsp;&gt;</a-button
      >
    </template>
    <a-spin :spinning="spinning">
      <div class="box">
        <a-row style="width: 100%">
          <a-col :span="12">
            <div>电动自行车：{{ pageData.electricBicycleTotal ? pageData.electricBicycleTotal : 0 }}元</div>
          </a-col>
          <a-col :span="12">
            <div>电动汽车：{{ pageData.electricCarTotal ? pageData.electricCarTotal : 0 }}元</div>
          </a-col>
        </a-row>
        <a-row class="chart-row">
          <a-col :span="12">
            <div id="chart1"></div>
          </a-col>
          <a-col :span="12">
            <div id="chart2"></div>
          </a-col>
        </a-row>
      </div>
    </a-spin>
  </a-card>
</template>
<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  reactive,
  nextTick,
  toRefs,
  onBeforeUnmount,
} from "vue";
import { Empty, message, Modal, Progress } from "ant-design-vue";
import request from "../../../common/utils/request";
import utils from "@/common/utils/utils";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import { Chart } from "@antv/g2";
export default defineComponent({
  name: "ChargPileTrend",
  components: { QuestionCircleOutlined },
  setup(props, context) {
    const state = reactive({
      spinning: false,
      pageData: [],
      chart1: null,
      chart2: null,
    });

    /** 初始化图表 */
    const initChart = (chartName, data) => {
      if (!state[chartName]) {
        state[chartName] = new Chart({
          container: `${chartName}`,
          autoFit: true,
          padding: [0, 0, 40, 0],
        });
      }

      state[chartName].data(data);
      state[chartName].scale("value", {
        alias: "金额（元）",
        nice: true,
      });

      state[chartName].tooltip({
        showMarkers: false,
      });
      state[chartName].legend(false);
      state[chartName].interaction("active-region");
      state[chartName].axis("value", {
        grid: {
          line: null,
        },
      });
      state[chartName].axis("label", {
        grid: {
          line: null,
        },
        line: null,
        tickLine: null,
        label: {
          offset: 20,
        },
      });
      state[chartName]
        .interval()
        .position("label*value")
        .style({ radius: 4 })
        .color("label", (val) => {
          return "#dae9fe";
        });

      state[chartName].render();
    };

    const getData = () => {
      state.spinning = true;
      request
        .get("/work_iot", "/workbench/pile/cash_info")
        .then((res) => {
          state.pageData = res.result;
          state.spinning = false;

          nextTick(() => {
            initChart("chart1", state.pageData.electricBicycle);
            initChart("chart2", state.pageData.electricCar);
          });
        })
        .catch((err) => {
          state.spinning = false;
        });
    };

    getData();

    const goMore = () => {
      utils.goAppRoute("workIOT", "chargeStation");
    };

    onBeforeUnmount(() => {
      const chart1 = document.getElementById("chart1");
      const chart2 = document.getElementById("chart2");
      if (chart1) {
        chart1.innerHTML = "";
      }
      if (chart2) {
        chart2.innerHTML = "";
      }
    });

    return {
      ...toRefs(state),
      goMore,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-progress-text) {
  color: #666;
}
.box {
  width: 100%;
  height: 100%;
}
.icon-primary {
  color: @primary-color;
  font-size: 18px;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}

.chart-row {
  width: 100%;
  height: calc(100% - 40px);

  #chart1 {
    height: 100%;
    padding-right: 10px;
    padding-top: 20px;
    position: relative;

    &::after {
      position: absolute;
      content: "";
      display: block;
      right: 0;
      top: 20%;
      width: 1px;
      height: 60%;
      background-color: #f1f1f1;
    }
  }

  #chart2 {
    height: 100%;
    padding-left: 10px;
    padding-top: 20px;
  }
}
</style>
